<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script th:src="@{/ace/ace.js}" src="/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{/ace/ext-language_tools.js}" src="/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="u-pb-10 u-flex space-between">
        <div class="u-flex">
            <div>
                <button type="button" class="layui-btn" th:onclick="save_quit()">保存退出</button>
            </div>
            <div class="u-pl-10">
                <button type="button" class="layui-btn" th:onclick="save()">保存并编译</button>
            </div>
        </div>
        <div class="u-flex">
            <div>
                <button type="button" class="layui-btn" th:onclick="preview()">
                    <i class="layui-icon">&#xe609;</i><span class="u-pl-5">预览</span>
                </button>
            </div>
            <div class="u-pl-10 width-150">
                <div class="layui-form">
                    <select id="select-id" name="theme" lay-filter="themes">
                        <option value="0" selected>经典模式</option>
                        <option value="1">炫酷模式</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div>
        <div id="editor" style="height: 100%; width: 100%"></div>
    </div>
</body>

<script type="text/javascript">

    $('a[href="/tab/App_AppCenter"]').parent().addClass('layui-this');
    
    let editor = ace.edit("editor");
    editor.setFontSize(16);
    editor.setTheme("ace/theme/eclipse");
    editor.getSession().setMode("ace/mode/java");
    editor.setOptions({
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    });

    let ruleId = ""
    let ruleNum = ""

    window.onload=function(){
        ruleId = GetQueryString("ruleId");
        if(isNotNull(ruleId)){
            //初始化代码
            initData();
        }
    }

    /**
     * 初始化代码
     */
    function initData() {
        $.ajax({
            type:'GET',
            url:'/rule/'+ruleId,
            dataType:'json',
            contentType: 'application/json; charset=UTF-8',
            success:function(req){
                ruleNum = req.data.ruleNum
                if(isNotNull(req.data.ruleCode)){
                    editor.insert(req.data.ruleCode);
                }
            },
            error:function(e){
                layer.msg("出错啦！");
            }
        })
    }

    function save() {
        let content = editor.getValue();
        let sub_data = {
            ruleId: ruleId,
            ruleNum: ruleNum,
            ruleCode: content
        }
        $.ajax({
            type:'POST',
            url:'/rule/saveAndCompile',
            data: JSON.stringify(sub_data),
            dataType:'json',
            contentType: 'application/json; charset=UTF-8',
            success:function(req){
                layer.msg("编译成功！");
                return false;
            },
            error:function(e){
                layer.msg("出错啦！");
            }
        })
    }

    //保存并退出
    function save_quit(){
        let content = editor.getValue();
        let sub_data = {
            ruleId: ruleId,
            ruleNum: ruleNum,
            ruleCode: content
        }
        $.ajax({
            type:'POST',
            url:'/rule/save',
            data: JSON.stringify(sub_data),
            dataType:'json',
            contentType: 'application/json; charset=UTF-8',
            success:function(req){
                layer.msg("已保存！");
                // 两秒后重载表格数据
                setTimeout(function(){
                    window.history.back();
                }, 2000);
                return false;
            },
            error:function(e){
                layer.msg("出错啦！");
            }
        })
    }

    //预览
    function preview(){
        window.open("/rule/preview?ruleNum="+ruleNum);
    }

    layui.use(['form'], function () {//layui 模块引用，根据需要自行修改
        let form = layui.form;
        form.render($('#select-id'));
        form.on('select(themes)', function(data){
            if(data.value == 0){
                editor.setTheme("ace/theme/eclipse");
            }else if(data.value == 1){
                editor.setTheme("ace/theme/dracula");
            }
        });
    })

</script>

</html>